import React, { useState, useCallback } from 'react';
import { View, Text, StyleSheet, TextInput, TouchableOpacity, Image, Alert } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';

type RootStackParamList = {
  Denglu: undefined;
  Wangmi: undefined;
};

type NavigationProp = NativeStackNavigationProp<RootStackParamList, 'Wangmi'>;

const ForgotPasswordScreen = () => {
  const navigation = useNavigation<NavigationProp>();
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [qq, setQQ] = useState('');
  const [phone, setPhone] = useState('');
  const [captcha, setCaptcha] = useState('');
  const [captchaImage, setCaptchaImage] = useState('https://picsum.photos/100/40'); // 示例验证码图片

  const validateUsername = (text: string) => {
    const regex = /^[a-zA-Z0-9_]{4,20}$/;
    return regex.test(text);
  };

  const validatePassword = (text: string) => {
    const regex = /^[a-zA-Z0-9_]{6,20}$/;
    return regex.test(text);
  };

  const refreshCaptcha = useCallback(() => {
    // 在实际应用中，这里应该调用后端API获取新的验证码图片
    setCaptchaImage(`https://picsum.photos/100/40?random=${Math.random()}`);
  }, []);

  const handleSubmit = () => {
    if (!validateUsername(username)) {
      Alert.alert('错误', '请输入有效的账号(4-20位字母、数字或下划线组合)');
      return;
    }
    if (!validatePassword(password)) {
      Alert.alert('错误', '请输入有效的密码(6-20个字母、数字、下划线的组合)');
      return;
    }
    if (password !== confirmPassword) {
      Alert.alert('错误', '两次输入的密码不一致');
      return;
    }
    if (!captcha) {
      Alert.alert('错误', '请输入验证码');
      return;
    }
    // 这里添加提交逻辑
    navigation.navigate('Denglu');
  };

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <TouchableOpacity style={styles.backBtn} onPress={() => navigation.goBack()}>
          <Text style={styles.backBtnText}>{'<'}</Text>
        </TouchableOpacity>
        <Text style={styles.headerTitle}>忘记密码</Text>
      </View>
      <View style={styles.form}>
        <Text style={styles.tipRed}>请输入有效的账号(4-20位字母、数字或下划线组合)</Text>
        <TextInput 
          style={styles.input} 
          placeholder="注册账号 4-20位字母、数字或下划线组合" 
          placeholderTextColor="#bbb"
          value={username}
          onChangeText={setUsername}
        />
        <Text style={styles.tipRed2}>6-20个字母、数字、下划线的组合</Text>
        <TextInput 
          style={styles.input} 
          placeholder="密码 6-20个字母、数字、下划线的组合" 
          placeholderTextColor="#bbb" 
          secureTextEntry
          value={password}
          onChangeText={setPassword}
        />
        <TextInput 
          style={styles.input} 
          placeholder="确认密码" 
          placeholderTextColor="#bbb" 
          secureTextEntry
          value={confirmPassword}
          onChangeText={setConfirmPassword}
        />
        <TextInput 
          style={styles.input} 
          placeholder="QQ" 
          placeholderTextColor="#bbb"
          value={qq}
          onChangeText={setQQ}
          keyboardType="numeric"
        />
        <TextInput 
          style={styles.input} 
          placeholder="手机号" 
          placeholderTextColor="#bbb" 
          keyboardType="phone-pad"
          value={phone}
          onChangeText={setPhone}
        />
        <View style={styles.captchaRow}>
          <TextInput 
            style={[styles.input, { flex: 1, marginRight: 10 }]} 
            placeholder="输入图片验证码" 
            placeholderTextColor="#bbb"
            value={captcha}
            onChangeText={setCaptcha}
          />
          <TouchableOpacity onPress={refreshCaptcha}>
            <Image 
              source={{ uri: captchaImage }} 
              style={styles.captchaImg} 
            />
          </TouchableOpacity>
        </View>
        <TouchableOpacity style={styles.submitBtn} onPress={handleSubmit}>
          <Text style={styles.submitBtnText}>提交</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  header: {
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
    borderBottomWidth: 1,
    borderBottomColor: '#f2f2f2',
    marginBottom: 10,
    position: 'relative',
  },
  backBtn: {
    position: 'absolute',
    left: 10,
    top: 0,
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 10,
    zIndex: 1,
  },
  backBtnText: {
    fontSize: 22,
    color: '#333',
  },
  headerTitle: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  form: {
    paddingHorizontal: 20,
    flex: 1,
  },
  tipRed: {
    color: '#e53935',
    fontSize: 12,
    marginBottom: 5,
    marginTop: 10,
  },
  tipRed2: {
    color: '#e53935',
    fontSize: 12,
    marginBottom: 5,
    marginTop: 10,
  },
  input: {
    height: 40,
    backgroundColor: '#f5f5f5',
    borderRadius: 5,
    paddingHorizontal: 10,
    marginBottom: 10,
    fontSize: 14,
  },
  captchaRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 20,
  },
  captchaImg: {
    width: 100,
    height: 40,
    borderRadius: 5,
  },
  submitBtn: {
    backgroundColor: '#d32f2f',
    borderRadius: 5,
    height: 45,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 10,
  },
  submitBtnText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default ForgotPasswordScreen;
